<template>
	<view v-if="showPage" id="wxInside">
		<view class="wrap">
			<view class="search_title">费用查询</view>
			<view class="search_des">请输入车牌号码</view>
			<view class="new_energy_car">
				<text @click="showCnKeyBoard" data-index="0"
					:class="activeIndex == 0 && 'active'">{{ carlicenseArr[0] ? carlicenseArr[0] : "" }}</text>
				<text @click="showKeyBoard" data-index="1"
					:class="activeIndex == 1 && 'active'">{{ carlicenseArr[1] ? carlicenseArr[1] : "" }}</text>
				<text @click="showKeyBoard" data-index="2"
					:class="activeIndex == 2 && 'active'">{{ carlicenseArr[2] ? carlicenseArr[2] : "" }}</text>
				<text @click="showKeyBoard" data-index="3"
					:class="activeIndex == 3 && 'active'">{{ carlicenseArr[3] ? carlicenseArr[3] : "" }}</text>
				<text @click="showKeyBoard" data-index="4"
					:class="activeIndex == 4 && 'active'">{{ carlicenseArr[4] ? carlicenseArr[4] : "" }}</text>
				<text @click="showKeyBoard" data-index="5"
					:class="activeIndex == 5 && 'active'">{{ carlicenseArr[5] ? carlicenseArr[5] : "" }}</text>
				<text @click="showKeyBoard" data-index="6"
					:class="activeIndex == 6 && 'active'">{{ carlicenseArr[6] ? carlicenseArr[6] : "" }}</text>
				<text v-if="newEnergyCar" @click="showKeyBoard" data-index="7"
					:class="activeIndex == 7 && 'active'">{{ carlicenseArr[7] ? carlicenseArr[7] : "" }}</text>
				<text v-else class="car-energy-site" @click="changeCarType" data-index="8"
					:class="activeIndex == 8 && 'active'">新</text>
			</view>
			<view class="no-car-tips" v-if="showNoRecordTips">* 车辆未在场内，请确认车牌号码是否正确</view>
			<button type="defaule" class="search" @click="findOrder">
				查询缴费信息
			</button>

			<view class="history_search_wrap">
				<view class="history_title"> 查询记录 </view>
				<view class="history_search" v-if="historyCars && historyCars.length > 0">
					<view v-for="item in historyCars" :key="item">
						<view class="historyCar_item" @click="findHistoryCarOrder" :data-item="item">
							{{ item }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<KeyBoard :showKeyBoard="show" :showCNKeyBoard="showCn" v-on:input-over="hideKeyBoard"
			v-on:change-press="changeKeyBoard" v-on:key-press="getPressKeyValue" v-on:del-press="delCarKeyPress"
			v-on:clear-press="clearCarInput" ref="keyBoard" />

		<view class="person_center" @click="toMyCenter">个人中心</view>
	</view>
</template>

<script>
	import KeyBoard from "@/components/keyBoard/keyBoard.vue";
	import {
		getBillingDetailApi,
	} from "@/api/api";
	export default {
		data() {
			return {
				showPage: true,
				show: false,
				showCn: false,
				disabled: true,
				carLength: 7,
				carlicenseArr: ["", "", "", "", "", "", "", "", ""],
				newEnergyCar: false,
				historyCars: [],
				parkingLotId: "",
				showNoRecordTips: false, //是否展示错误提示
				activeIndex: 0, //当前高亮的值
			};
		},
		components: {
			KeyBoard,
		},
		watch: {
			carlicenseArr: function() {
				const len = this.carlicenseArr.length;
				len == 0 && (this.showCn = true);
				len == 1 && (this.showCn = false);
			},
		},
		onLoad(options) {
			const that = this;
			const cars = uni.getStorageSync("historyCars");
			that.historyCars = cars ? cars.split(",") : [];
		},
		methods: {
			toMyCenter() {
				uni.navigateTo({
					url: '/pages/mine/mine'
				})
			},
			//控制键盘显示
			showKeyBoard(e) {
				this.show = true;
				this.showCn = false;
				this.showNoRecordTips = false;
				this.activeIndex = e.target.dataset.index; //渲染当前高亮
			},
			changeCarType() {
				this.newEnergyCar = true;
				this.carLength = 8;
			},
			showCnKeyBoard() {
				this.show = true; //展示键盘
				this.showCn = true; //展示中文汉字
				this.showNoRecordTips = false; //清空提示
				this.activeIndex = 0; //设置高亮
			},
			//查询订单
			async findOrder() {
				const that = this;
				const carlicense = that.carlicenseArr.join("");
				if (carlicense.length < 7) {
					uni.showToast({
						title: "请输入正确的车牌号码~",
						icon: "none",
					});
					return;
				}
				uni.showLoading({
					title: "加载中",
				});



				// 查询之后填入进查询记录，存入缓存，用户再次打开之后用于回显
				const cars = uni.getStorageSync("historyCars");
				const historyCars = cars ? cars.split(",") : [];
				if (!historyCars.includes(carlicense)) {
					historyCars.length > 5 && historyCars.pop();
					historyCars.unshift(carlicense);
					uni.setStorageSync("historyCars", historyCars.join(","));
				}
				this.historyCars = historyCars;

				// 查询订单接口
				const result = await getBillingDetailApi({
					carLicense: carlicense,
				});
				uni.hideLoading();
				if (result.code != 200) {
					uni.showToast({
						title: result.msg,
						icon: "none",
					});
					return;
				}
				if (result.code == 200 && result.data == null) {
					that.showNoRecordTips = true;
					return;
				}
				const res = result.data;
				uni.redirectTo({
					url: `/pages/payDetails/payDetails?carLicense=${carlicense}`,
				});

			},
			clearHistory() {
				this.historyCars = [];
			},
			//点击历史查询车牌快速查找订单
			findHistoryCarOrder(e) {
				const {
					item
				} = e.target.dataset;
				this.carLength = item.length;
				this.newEnergyCar = this.carLength == 8 ? true : false; //用于回显新能源
				this.carlicenseArr = item.split("");
			},
			//键盘点击完成，收起键盘
			hideKeyBoard() {
				this.show = false;
			},
			//获取按键值
			getPressKeyValue(val) {
				const index = this.activeIndex;
				if (index == 8) {
					return;
				}
				this.carlicenseArr.splice(index, 1, val);
				this.activeIndex = Number(index) + 1;
				// 1、首位判断是否展示汉字
				this.showCn = this.activeIndex == 0 ? true : false;
				//2、判断是否有新能源的的情况；
				if (this.activeIndex == 7) {
					this.newEnergyCar = true;
				}
			},
			//切换中英文键盘
			changeKeyBoard() {
				this.showCn = !this.showCn;
			},
			//按下退格键
			delCarKeyPress() {
				let carArr = this.carlicenseArr;
				carArr.pop();
				this.carlicenseArr = carArr;
			},
			//按下清空键
			clearCarInput() {
				this.carlicenseArr = ["", "", "", "", "", "", "", "", ""];
				this.carLength = 7;
				this.newEnergyCar = false;
				this.activeIndex = 0;
			},
		},
	};
</script>

<style scoped lang="less">
	#wxInside {
		height: 100vh;
		// background: ;
		background: url(../../static/images/Rectangle@2x.png) no-repeat;
		background-size: contain;
		background-position: bottom;

		.wrap {
			width: 100%;
			padding: 168rpx 40rpx 0;
			font-size: 28rpx;
			box-sizing: border-box;

			.search_title {
				height: 70rpx;
				font-size: 50rpx;
				color: #242a37;
				line-height: 70rpx;
				font-family: "myFont_Mediun";
			}

			.search_des {
				height: 38rpx;
				font-size: 28rpx;
				color: #242a37;
				line-height: 38rpx;
				margin: 60rpx 0 36rpx;
			}

			.new_energy_car {
				height: 90rpx;
				border-radius: 10px;
				display: flex;
				justify-content: space-between;
				flex-wrap: nowrap;
				margin-bottom: 58rpx;

				text {
					font-size: 40rpx;
					display: block;
					width: 76rpx;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					border: 2rpx solid #d8d9dc;
				}

				text.active {
					border-color: #2d4fa2;
					position: relative;

					&::after {
						content: "";
						background: #1d1b17;
						width: 4rpx;
						height: 50rpx;
						display: inline-block;
						animation: fade 800ms infinite;
						-webkit-animation: fade 800ms infinite;
						position: absolute;
						top: 18rpx;
					}
				}

				.car-energy-site {
					background: linear-gradient(180deg, #fbfff6 0%, #c0fd9d 100%);
					border-radius: 4rpx;
					border: 2rpx dashed #70b602;
					color: #4bbb0e;
				}
			}

			.no-car-tips {
				height: 38rpx;
				font-size: 28rpx;
				color: #ff3a50;
				line-height: 38rpx;
				margin-bottom: 18rpx;
				text-align: center;
			}

			.search {
				width: 612rpx;
				height: 110rpx;
				background: #007fff;
				box-shadow: 0px 20rpx 40rpx 0px rgba(0, 0, 0, 0.1),
					0px 24rpx 48rpx 0px rgba(45, 79, 162, 0.08);
				border-radius: 55rpx;
				line-height: 110rpx;
				font-size: 36rpx;
				font-family: "myFont_Mediun";
				color: #ffffff;
			}
		}

		.history_search_wrap {
			margin-top: 100rpx;

			.history_title {
				font-size: 28rpx;
				color: #242a37;
				line-height: 38rpx;
				margin-bottom: 42rpx;

				view {
					float: right;
				}

				img {
					width: 16px;
					height: 16px;
					padding: 8px;
					vertical-align: middle;
				}

				text {
					display: inline-block;
					line-height: 30px;
					height: 30px;
				}
			}

			.history_search {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				.historyCar_item {
					width: 168rpx;
					height: 60rpx;
					background: #eeeeee;
					border-radius: 8rpx;
					text-align: center;
					line-height: 60rpx;
					margin-right: 24rpx;
					font-size: 28rpx;
					color: #595959;
					font-weight: 400;
					font-family: "PingFangSC-Regular, PingFang SC";
					margin-bottom: 24rpx;
				}
			}
		}

		.placeholder {
			color: #ccc;
		}

		.black {
			color: rgb(20, 20, 20);
		}

		@keyframes fade {
			from {
				opacity: 1;
			}

			50% {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}

		@-webkit-keyframes fade {
			from {
				opacity: 1;
			}

			50% {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}
	}

	.person_center {
		position: fixed;
		right: 0;
		width: 180rpx;
		height: 240rpx;
		height: 80rpx;
		background: #007fff;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx 0 0 40rpx;
		box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(0, 0, 0, 0.1);
		color: #fff;
		bottom: 300rpx;
	}
</style>
